:root{
  --border:#e5e7eb;
  --shadow: 0 10px 30px rgba(0,0,0,.12);
  --text:#1f2937;
}

*{box-sizing:border-box}
body{margin:0; font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--text); background-image: url("paysage sama lodge.jpg");}

/* disposition générale */
.slider-section{
  max-width:1200px; margin:40px auto; padding:0 20px;
  display:grid; grid-template-columns: 1.4fr .8fr; gap:24px;
}
@media (max-width: 900px){
  .slider-section{grid-template-columns: 1fr}
}

/* carrousel */
.slider{
  position:relative; border-radius:12px; overflow:hidden; background:#000;
  box-shadow:var(--shadow);
}
.track{
  display:flex; transition: transform .35s ease;
  will-change: transform;
}
.slide{
  min-width:100%; height:520px; margin:0; /* hauteur visible */
  display:flex; align-items:center; justify-content:center; background:#000;
}
.slide img{
  width:100%; height:100%; object-fit:cover;
}

/* Responsive pour les images du carrousel */
@media (max-width: 768px) {
  .slide {
    height: 350px; /* Réduit la hauteur sur tablette */
  }
}

@media (max-width: 576px) {
  .slide {
    height: 280px; /* Encore plus petit sur mobile */
  }
}

/* flèches */
.nav{
  position:absolute !important; 
  top:50% !important; 
  transform:translateY(-50%) !important;
  width:44px !important; 
  height:44px !important; 
  border:none !important; 
  border-radius:50% !important;
  background:rgba(255,255,255,.95) !important; 
  cursor:pointer !important; 
  font-size:22px !important; 
  line-height:44px !important;
  display:grid !important; 
  place-items:center !important;
  box-shadow:0 4px 10px rgba(0,0,0,.3) !important;
  z-index: 9999 !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #ffffff !important;
  text-align: center !important;
}
.nav:hover{background:#fff !important;}
.nav:active{background:#fff !important; transform:translateY(-50%) scale(0.95) !important;}
.prev{left:12px !important;}
.next{right:12px !important;}

/* Responsive pour les flèches */
@media (max-width: 768px) {
  .nav {
    width: 40px;
    height: 40px;
    font-size: 20px;
    line-height: 40px;
    background: rgba(255,255,255,.95); /* Plus opaque */
    z-index: 10; /* S'assurer qu'elles sont au-dessus */
  }
  .prev{left: 10px}
  .next{right: 10px}
}

@media (max-width: 576px) {
  .nav {
    width: 44px; /* Garde la taille normale sur mobile */
    height: 44px;
    font-size: 22px;
    line-height: 44px;
    background: rgba(255,255,255,.95);
    border: 2px solid rgba(0,0,0,0.1); /* Bordure pour plus de visibilité */
  }
  .prev{left: 12px}
  .next{right: 12px}
}

/* panneau blanc à droite */
.info{
  background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:24px; box-shadow:var(--shadow);
}
.info h2{margin:0 0 8px; font-size:24px}
.info p{margin:0 0 12px}

/* 🔴 masque le paragraphe descriptif */
#desc {
  display: none;
}

.meta{margin:12px 0 0; padding-left:18px}
.meta li{margin:4px 0}

/* Responsive pour le panneau info */
@media (max-width: 900px) {
  .info {
    margin-top: 20px; /* Espacement quand il passe en dessous */
  }
}

@media (max-width: 576px) {
  .info {
    padding: 16px; /* Moins de padding sur mobile */
  }
  .info h2 {
    font-size: 20px; /* Titre plus petit sur mobile */
  }
}

/* focus (accessibilité) */
.nav:focus{outline:3px solid #2563eb; outline-offset:2px}

/* Formulaire */
.form-grid{ display:grid; gap:14px; grid-template-columns:repeat(2,1fr);color: black; }
.form-grid .full{ grid-column:1/-1; }
input,textarea{ width:100%; padding:10px; border-radius:8px; background:#0f1117; border:1px solid rgba(255,255,255,.16); color:rgb(255, 255, 255); }

/* Responsive pour le formulaire */
@media (max-width: 576px) {
  .form-grid {
    grid-template-columns: 1fr; /* Une seule colonne sur mobile */
  }
}

/* Footer */
.site-footer{ border-top:1px solid rgba(255,255,255,.08); padding:16px 0; text-align:center; color:black; }

/* Buttons */
.btn{ display:inline-block; padding:10px 16px; border-radius:12px; font-weight:600; text-decoration:none; }
.btn.primary{ background:orange; color:rgb(0, 0, 0); box-shadow:0 4px 13px orange; }
.btn.secondary{ border:1px solid rgba(0, 0, 0, 0.16); color:var(--text); }
.btn.small{ font-size:.9rem; padding:6px 10px; }
.btn.ghost{ border:1px solid rgba(255,255,255,.16); color:black; }

/* Responsive pour les boutons */
@media (max-width: 576px) {
  .btn {
    padding: 8px 12px; /* Boutons plus compacts sur mobile */
    font-size: 14px;
  }
}

.logo-img {
  height: 100px;      /* ajuste la hauteur (ex: 60px) */
  width: auto;       /* garde les proportions */
  margin-left: 20px; /* espace à gauche si nécessaire */
}

/* Responsive pour le logo */
@media (max-width: 768px) {
  .logo-img {
    height: 80px; /* Logo plus petit sur tablette */
    margin-left: 10px;
  }
}

@media (max-width: 576px) {
  .logo-img {
    height: 60px; /* Encore plus petit sur mobile */
    margin-left: 5px;
  }
}

/* Dropdown */
.has-dropdown{ position:relative; }
.dropdown{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:var(--surface);
  border-radius:12px;
  margin-top:6px;
  min-width:200px;
  border:1px solid rgba(255,255,255,.16);
}
.has-dropdown:hover .dropdown{ display:block; }

.dropdown a{
  display:block;
  padding:10px 14px;
  color:var(--text);
  text-decoration:none;
}
.dropdown a:hover{
  background:rgba(255,255,255,.16); /* léger fond au survol seulement */
}

/* Mobile nav */
.nav-toggle{ display:none; font-size:1.4rem; background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.16); border-radius:10px; padding:6px 10px; cursor:pointer; }
@media(max-width:860px){
  .nav-toggle{ display:block; }
  .nav{ display:none; }
  .nav.open{ display:block; }
  .nav-list{ flex-direction:column; background:var(--surface); padding:10px; border-radius:12px; }
  .dropdown{ position:static; border:0; box-shadow:none; margin:0; }
  .dropdown a{ padding-left:28px; }
}

/* Header */
.site-header{ position:sticky; top:0; background:rgba(255,255,255,.16); backdrop-filter:blur(10px); z-index:50; }
.nav-wrap{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; }
.logo{ font-weight:700; color:var(--text); text-decoration:none; }
.logo span{ color:var(--primary); }
.nav-list{ list-style:none; display:flex; gap:14px; }
.nav a{ color:rgb(255, 255, 255); text-decoration:none; padding:10px; border-radius:8px; }
.nav a:hover{ background:rgba(255,255,255,.16); }

/* Responsive pour la navigation */
@media (max-width: 768px) {
  .nav-wrap {
    padding: 8px 0; /* Header plus compact */
  }
  .nav-list {
    gap: 8px; /* Moins d'espace entre les éléments */
  }
}

/* Container global (sert aussi pour le header) */
.container{
  max-width: 1200px;
  margin: 0 auto;                 /* centre le contenu */
  padding: 0 28px;                /* <-- espace à gauche/droite */
}

/* Option : plus d'air sur grand écran */
@media (min-width: 1400px){
  .container{ padding: 0 48px; }  /* <-- augmente le recul latéral */
}

/* Responsive pour le container */
@media (max-width: 768px) {
  .container {
    padding: 0 16px; /* Moins de padding sur tablette */
  }
}

@media (max-width: 576px) {
  .container {
    padding: 0 12px; /* Encore moins sur mobile */
  }
}

/* Header */
.site-header{
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  z-index: 50;
}
.nav-wrap{
  display:flex;
  align-items:center;
  justify-content: space-between; /* logo à gauche, bouton à droite */
  padding: 12px 0;                /* la marge verticale du header */
}

/* Liste à droite (remet à zéro les marges par défaut des <ul>) */
.nav-list{
  list-style: none;
  display:flex;
  gap:14px;
  margin: 0;
  padding: 0;
}

/* Logo : mieux vaut gérer l'écart via le container, pas un margin-left */
.logo-img{
  height: 56px;   /* 100px était très grand */
  width: auto;
  margin-left: 0; /* ← enlève si tu l'avais mis */
}

/* Bouton (facultatif : un peu d'ombre et de padding) */
.btn.primary{
  padding: 10px 18px;
  border-radius: 12px;
}

/* Section contact responsive */
@media (max-width: 768px) {
  #contact {
    padding: 0 16px;
  }
  
  #contact h2 {
    font-size: 20px;
  }
}

/* Ajustements finaux pour très petits écrans */
@media (max-width: 320px) {
  .slider-section {
    padding: 0 10px;
    margin: 20px auto;
  }
  
  .slide {
    height: 250px;
  }
  
  .info {
    padding: 12px;
  }
  
  .nav {
    width: 32px;
    height: 32px;
    font-size: 16px;
    line-height: 32px;
  }
}